<template>
	<view class="live-shop">
		<view class="buycar" @click="open">
			<image src="../../static/image/buycar2.png" mode=""></image>
		</view>
		<!-- 弹出验证框 -->
		<view :hidden="userFeedbackHidden" class="popup_content">
			<view class="popup_title">预约手机号</view>
			<view class="popup_item">绑定后可凭该手机号取货</view>
			<view class="phone_num">
				<view class="num">手机号码</view>
				<view class="d-flex">
					<picker class="first_num" mode="selector" :value="index" :range="selecValue" @change="bindPickerChange">
						<view class="picker_num">{{selecValue[index]}}</view>
					</picker>
					<view class="connect">-</view>
					<view class="second_num">
						<input v-model="phone" class="input_num" maxlength="20" type="number" placeholder="请输入常用手机号" />
					</view>
				</view>
			</view>
			<view class="note_validate">
				<view class="num">短信验证</view>
				<view class="d-flex">
					<view class="third_num">
						<input class="validate_num_input" maxlength="20" placeholder="请输入验证码" />
					</view>
					<view class="validate_num">
						<text>获取验证码</text>
					</view>
				</view>
			</view>
			<view class="sub_btn" @click="submitFeedback">
				<text space="ensp">提 交</text>
			</view>
		</view>
		<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
		<uni-popup ref="popup" type="bottom">
			<view class="chose">
				<scroll-view scroll-x="true" @scroll="scroll" class="scroll-view-H">
					<view class="list">
						<view v-for="(item,index) in shopList" :key="index" class="scroll-view-item_H ">
							<view class="demo">
								<view class="demo-img">
								</view>
								<view class="demo-name">
									<text>{{item.name}}</text>
								</view>
								<view class="demo-num">
									<text>￥{{item.money}}</text>
									<view class="addcar">
										<image src="../../static/image/buycar1.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="submit">
					<view class="submit-img" @click="openCar">
						<image src="../../static/image/buycar2.png" mode=""></image>
					</view>
					<text @click="showDiv">提交预约</text>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupCar" type="bottom">
			<view class="chose">
				<scroll-view scroll-y="true" @scroll="carScroll" class="car">
					<view class="shop_car_item">
						<view class="car_title">购物车</view>
						<view v-for="(item,index) in shopList" :key="index" class="car_item">
							<view class="d-flex">
								<view class="d-flex">
									<view class="shopCar_img">
									</view>
									<text class="item_name">{{item.name}}</text>
								</view>
								<view class="car_money">
									<text>￥{{item.money}}</text>
									<text>x1</text>
								</view>
							</view>
							<view class="justify_end">
								<text class="discount">总价 ￥ {{item.money}}</text>
								<text class="discount" style="margin: 0 20rpx 0 20rpx;">优惠 ￥ 0</text>
								<text class="pay">实付款 ￥ 123,456</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="submit">
					<view class="submit-img">
						<image src="../../static/image/buycar2.png" mode=""></image>
					</view>
					<text @click="showDiv">提交预约</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniBadge from "@/components/uni-badge/uni-badge.vue"
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			uniBadge
		},
		data() {
			return {
				shopList: [{
						name: '绿宝石钻石项链',
						money: '414,000'
					},
					{
						name: '时来运转戒指',
						money: "24,600"
					},
					{
						name: 'SUNLIGHT坠饰',
						money: '154,000'
					},
					{
						name: 'SUNLIGHT坠饰',
						money: '154,000'
					},
					{
						name: 'SUNLIGHT坠饰',
						money: '154,000'
					}
				],
				scrollLeft: 0,
				old: {
					scrollLeft: 0
				},
				userFeedbackHidden: true, // 默认隐藏
				feedbackContent: '', // 用户反馈内容
				selecValue: ['0833', '0811'], //手机号下拉框
				phone: '',
				index: 0,
				scrollTop: 0,
				oldTop: {
					scrollTop: 0
				}
			}
		},
		methods: {
			open() {
				this.$refs.popup.open()
			},
			openCar() {
				this.$refs.popupCar.open()
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollLeft = e.detail.scrollleft
			},
			showDiv() { // 显示输入弹出框
				this.userFeedbackHidden = false;
			},
			hideDiv() { // 隐藏输入弹出框
				this.userFeedbackHidden = true;
			},
			submitFeedback() { // 提交
				if (!(/^1[3|4|5|7|8][0-9]{9}$/.test(this.phone))) {
					uni.showToast({
						title: "手机号码有误，请重填",
						icon: 'none'
					})
					return
				}

			},
			onInput(e) {
				this.phone = e.detail;
			},
			bindPickerChange(e) {
				this.index = e.target.value;
			},
			carScroll: function(e) {
				console.log(e)
				this.oldTop.scrollTop = e.detail.scrollTop
			},
		}
	}
</script>

<style scoped>
	.car{
		height: 736rpx;
		width: 100%;
	}
	.car_title {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 44rpx;
		margin-bottom: 20rpx;
	}

	.item_name {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.car_money {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		opacity: 0.6;
	}

	.justify_end {
		display: flex;
		justify-content: flex-end;
		margin: 20rpx 0;
	}

	.discount {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
		opacity: 0.4;
	}

	.pay {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;
	}

	.car_item {
		margin-bottom: 12rpx;
		border-bottom: 1px solid #29292F;
	}

	.shopCar_img {
		width: 200rpx;
		height: 132rpx;
		background-color: #FFFFFF;
		margin-right: 20rpx;
	}

	.shop_car_item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		background-color: #1F1F24;
		padding: 26rpx;
		border-radius: 12px 12px 0px 0px;
	}

	.buycar {
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
	}

	.buycar image {
		width: 44rpx;
		height: 34rpx;
	}

	.live-shop {
		width: 100%;
	}

	.demo {
		/* width: 300rpx; */
		width: 240rpx;
		height: 276rpx;
		background-color: #0F0F10;
		display: flex;
		flex-direction: column;
		padding-left: 30rpx;
		align-items: center;
	}

	.demo-img {
		width: 240rpx;
		height: 160rpx;
		background-color: #FFFFFF;
	}

	.demo-name {
		height: 40rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		width: 96%;
	}

	.demo-num {
		display: flex;
		justify-content: space-between;
		width: 96%;
	}

	.demo-num>text {

		font-size: 28rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E9A932;
	}

	.addcar image {
		width: 32rpx;
		height: 32rpx;
	}

	.submit {
		display: flex;
		width: 92%;
		height: 100rpx;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
	}

	.submit-img {
		width: 72rpx;
		height: 72rpx;
		background: #26262C;
		border-radius: 100px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.submit-img>image {
		width: 44rpx;
		height: 34rpx;
	}

	.submit>text {
		width: 240rpx;
		height: 72rpx;
		background: linear-gradient(142deg, #CAA022 0%, #E09926 100%);
		border-radius: 36rpx;
		text-align: center;
		line-height: 72rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.list {
		display: flex;
	}

	.scroll-view-H {
		width: 100%;
	}

	.list {
		width: 160%;
		display: flex;
	}

	.chose {
		width: 100%;
		background-color: #0F0F10;
	}

	/* 弹出验证框 */
	.popup_overlay {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: black;
		z-index: 1001;
		-moz-opacity: 0.8;
		opacity: .80;
		filter: alpha(opacity=88);
	}

	.phone_num {
		display: flex;
		justify-content: space-between;
		margin-top: 80rpx;
	}

	.note_validate {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.validate_num {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 180rpx;
		height: 64rpx;
		border: 1px solid #F7B500;
		text-align: center;
		margin-left: 22rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F7B500;
	}

	.validate_num_input {
		width: 180rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 27rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;

	}

	.num {
		color: #FFFFFF;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.connect {
		width: 9px;
		height: 20px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 20px;
		text-stroke: 1px #979797;
		margin: 10rpx 10rpx 0 10rpx;
	}

	.first_num {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 140rpx;
		height: 64rpx;
		background: #000000;
		opacity: 0.3;
	}

	.third_num {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 220rpx;
		height: 64rpx;
		background: #000000;
		opacity: 0.3;
		border: 1px solid #000000;

	}

	.d-flex {
		display: flex;
		justify-content: space-between;
	}

	.picker_num {
		width: 68rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
	}

	.second_num {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 250rpx;
		height: 64rpx;
		background: #000000;
		opacity: 0.3;
	}

	.input_num {
		width: 220rpx;
		height: 40rpx;
		font-size: 27rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 40rpx;

	}

	.sub_btn {
		margin-top: 80rpx;
		width: 560rpx;
		height: 72rpx;
		background: linear-gradient(142deg, #CAA022 0%, #E09926 100%);
		border-radius: 100px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		padding-top: 28rpx;

	}

	.popup_content {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 566rpx;
		height: 500rpx;
		margin-left: -325rpx;
		margin-top: -310rpx;
		background-color: #1F1F24;
		z-index: 1002;
		overflow: auto;
		border-radius: 24rpx;
		padding: 40rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.5);
	}

	.popup_title {
		width: 480rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.popup_item {
		margin-top: 20rpx;
		color: #FFFFFF;
		font-size: 28rpx;
		opacity: 0.4;
	}
</style>
